<template>
  <div>
   
    <button @click="isShow=!isShow">点击</button>
    <ModalVue :state="isShow" :modalTitle='modalTitle' :isShow.sync='isShow'>
      <template slot="content">about内容</template>
      <template slot="input">
        <input type="text" v-model="modalVal" />
      </template>
      <template v-slot:buttons>
        <button @click="confirm">确认</button>
        <button @click="cancel">取消</button>
      </template>
    </ModalVue>
  </div>
</template>

<script>
import ModalVue from "./components/Modal.vue";

export default {
  data() {
    return {
      isShow: false,
      modalVal:'',
      modalTitle:'modalTitle'
    };
  },
  methods:{
    confirm() {
      console.log(this.modalVal)
      this.cancel()
    },
    cancel() {
      this.isShow=false
      this.modalVal=''
    }
  },
  components: {
   
    ModalVue
  }
};
</script>

<style scoped>
</style>